<template>
  <div class="login-container">
    <div class="login-wrap">
      <h2>学生信息管理系统</h2>
      <div class="login-content">
         <p class="login-title">用户登录</p>
         <el-form :model="form" :rules="rules" ref="loginForm" :status-icon="true" class="login-form">
            <el-form-item prop="username">
              <el-input size="large" v-model="form.username">
                <template #prepend>
                 <span>账号</span>
                </template>
              </el-input>
            </el-form-item> 
            <el-form-item prop="password">
              <el-input size="large" type="password" v-model="form.password">
                 <template #prepend>
                 <span>密码</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="large" type="primary" @click="login(loginForm)">用户登录</el-button>
            </el-form-item>
         </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="MyLogin">
  import { reactive, ref, getCurrentInstance } from 'vue';
  import { useRouter } from 'vue-router'
  import type { FormRules, FormInstance } from 'element-plus';
  import { ElMessage } from 'element-plus'
  import emitter from '@/utils/mitt';
  const instance = getCurrentInstance();
  interface RuleForm {
    username: string,
    password: string
  }
  const form = reactive<RuleForm>({
    username: '',
    password: ''
  })
  
  const loginForm = ref<FormInstance>()

  const router = useRouter();

  const rules = reactive<FormRules<RuleForm>>({
    username: [
      {
        required: true,
        message: '请输入账号',
        trigger: 'blur'

      }
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'blur'

      }
    ]
  })

  const login = async (formE: FormInstance | undefined ) => {
    if(!formE) return
    await formE.validate(valid => {
      if(valid) {
        ElMessage({
          message: '登录成功',
          type: 'success',
        });
        localStorage.setItem('userInfo', JSON.stringify(form))
        localStorage.setItem('x-token', '1');
        router.push('/');
        emitter.emit('login');
      }
    })
  }
</script>

<style scoped lang="scss">
.login-container {
  background: url(../assets/bg.jpg);
  width: 100vw;
  height: 100vh;
  position: relative;
  .login-wrap {
    width: 500px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  h2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
    color: #333;
    text-align: center;
    font-weight: 700;
    margin-bottom: 40px;
  }
  .login-content {
    width: 100%;
    height: calc(100% - 60px);
    padding: 40px;
    box-sizing: border-box;
    border: 1px solid #555;
    border-radius: 10px;
    .login-title {
      width: 100%;
      height: 30px;
      font-size: 24px;
      text-align: center;
      line-height: 30px;
      color: #333;
      margin-bottom: 30px;
    }
    :deep .login-form{
      .el-form-item {
        margin-bottom: 40px;
        width: 100%;
        text-align: center;
        .el-form-item__content {
          width: 100%;
          justify-content: center;
          .el-button {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>